<!DOCTYPE html>
<html lang="en"
      xmlns:th="https://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JSON Schema Helper</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Toastr style -->
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- JSON Viewer -->
    <link href="css/jquery.json-viewer.css" rel="stylesheet">

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">

</head>

<body>

<div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <a class="dropdown-toggle" href="/">
                            <span class="clear">
                                <span class="block m-t-xs">
                                    <strong
                                            class="font-bold"
                                            style="font-size: 30px;text-shadow: 5px 5px 5px black, 0px 0px 2px black;color: white;">Regulus
                                    </strong>
                             </span>
                            </span>
                        </a>
                    </div>
                </li>
                <li>
                    <a href="/campaign.htm"><i class="fa fa-diamond"></i> <span class="nav-label">Campaign Center</span></a>
                </li>
                <li>
                    <a href="/campaign/moduleConfig.htm"><i class="fa fa-edit"></i> <span class="nav-label">ICMS Module Config</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-bolt"></i> <span class="nav-label">Campaign Creation</span><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="/ucmptools/createMaster.htm">Master Campaign</a></li>
                        <li><a href="/ucmptools/createChild.htm">Child Campaign</a></li>
                        <li><a href="/ucmptools/createVoucher.htm">Voucher Campaign</a></li>
                    </ul>
                </li>
                <li class="active">
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">Campaign Tools </span><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li class="active"><a href="/schema">JSON Schema Helper</a></li>
                    </ul>
                </li>
            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i>
                    </a>
                    <form role="search" class="navbar-form-custom" action="search_results.html">
                        <div class="form-group">
                            <input type="text" placeholder="Search for something..." class="form-control"
                                   name="top-search" id="top-search">
                        </div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <span class="m-r-sm text-muted welcome-message">Welcome to INSPINIA+ Admin Theme.</span>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                            <i class="fa fa-envelope"></i> <span class="label label-warning">16</span>
                        </a>
                        <ul class="dropdown-menu dropdown-messages">
                            <li>
                                <div class="dropdown-messages-box">
                                    <a href="profile.html" class="pull-left">
                                        <img alt="image" class="img-circle" src="img/a7.jpg">
                                    </a>
                                    <div class="media-body">
                                        <small class="pull-right">46h ago</small>
                                        <strong>Mike Loreipsum</strong> started following <strong>Monica Smith</strong>.
                                        <br>
                                        <small class="text-muted">3 days ago at 7:58 pm - 10.06.2014</small>
                                    </div>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="dropdown-messages-box">
                                    <a href="profile.html" class="pull-left">
                                        <img alt="image" class="img-circle" src="img/a4.jpg">
                                    </a>
                                    <div class="media-body ">
                                        <small class="pull-right text-navy">5h ago</small>
                                        <strong>Chris Johnatan Overtunk</strong> started following <strong>Monica
                                        Smith</strong>. <br>
                                        <small class="text-muted">Yesterday 1:21 pm - 11.06.2014</small>
                                    </div>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="dropdown-messages-box">
                                    <a href="profile.html" class="pull-left">
                                        <img alt="image" class="img-circle" src="img/profile.jpg">
                                    </a>
                                    <div class="media-body ">
                                        <small class="pull-right">23h ago</small>
                                        <strong>Monica Smith</strong> love <strong>Kim Smith</strong>. <br>
                                        <small class="text-muted">2 days ago at 2:30 am - 11.06.2014</small>
                                    </div>
                                </div>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="text-center link-block">
                                    <a href="mailbox.html">
                                        <i class="fa fa-envelope"></i> <strong>Read All Messages</strong>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                            <i class="fa fa-bell"></i> <span class="label label-primary">8</span>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts">
                            <li>
                                <a href="mailbox.html">
                                    <div>
                                        <i class="fa fa-envelope fa-fw"></i> You have 16 messages
                                        <span class="pull-right text-muted small">4 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="profile.html">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                        <span class="pull-right text-muted small">12 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="grid_options.html">
                                    <div>
                                        <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                        <span class="pull-right text-muted small">4 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div class="text-center link-block">
                                    <a href="notifications.html">
                                        <strong>See All Alerts</strong>
                                        <i class="fa fa-angle-right"></i>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>


                    <li>
                        <a href="login.html">
                            <i class="fa fa-sign-out"></i> Log out
                        </a>
                    </li>
                </ul>

            </nav>
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h4>JSON Schema Helper
                    &nbsp;
                    <span class="label label-info">Beta</span>
                </h4>
                <h5>使用方法</h5>
                <strong>Step 1: &nbsp;</strong>在 "Original JSON" 中输入待校验 JSON 样例，并点击"解析"<br>
                <strong>Step 2: &nbsp;</strong>在 "Analysis Result" 中选择要校验的节点，然后点击"生成Schema"<br>
                <strong>Step 3: &nbsp;</strong>根据需要，在 "JSON Schema" 中编辑结果，得到最终的 JSON Schema
            </div>
        </div>

        <div class="wrapper wrapper-content  animated fadeInRight">
            <!-- Start -->
            <div class="row">
                <div class="col-lg-4">
                    <div class="ibox-title">
                        <h5>Original JSON</h5>
                        <div class="ibox-tools" style="margin-top: -10px">
                            <button id="btn-json-resolver" class="btn btn-info" title="">解析</button>
                        </div>
                    </div>
                    <div class="ibox-content" style="height: 700px">
                        <style type="text/css" media="screen">
                            #original {
                                height: 650px;
                            }
                        </style>
                        <div id="original"></div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="ibox-title">
                        <h5>Analysis Result</h5>
                        <div class="ibox-tools" style="margin-top: -10px">
                            <button id="btn-json-generate-schema" class="btn btn-info" title="">生成 Schema</button>
                        </div>
                    </div>
                    <pre id="json-analysis-result" style="background-color: #ffffff; height: 700px" aria-rowcount=""></pre>
                </div>

                <div class="col-lg-4">
                    <div class="ibox-title">
                        <h5>JSON Schema</h5>
                        <div class="ibox-tools" style="margin-top: -10px">

                        </div>
                    </div>
                    <div class="ibox-content" style="height: 700px">
                        <style type="text/css" media="screen">
                            #schema {
                                height: 650px;
                            }
                        </style>
                        <div id="schema"></div>
                    </div>
                </div>
            </div>
            <!-- End -->

        </div>
        <div class="footer">
            <div class="pull-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company &copy; 2014-2015
            </div>
        </div>

    </div>
</div>


<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>

<!-- JSON viewer -->
<script src="js/jquery.json-viewer.js"></script>

<!-- Clipboard -->
<script src="js/plugins/clipboard/clipboard.min.js"></script>

<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>

<script type="text/javascript" src="/js/ace/ace.js"></script>
<script>
    $(document).ready(function () {
        new Clipboard('.btn');

        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });

    var original = ace.edit("original");
    original.setOptions({
        mode: 'ace/mode/json',
        theme: 'ace/theme/twilight',
        tabSize: 2,
        wrap: true,
    })

    var schema = ace.edit("schema");
    schema.setOptions({
        mode: 'ace/mode/json',
        theme: 'ace/theme/twilight',
        tabSize: 2,
        wrap: true,
    })

</script>

<script type="text/javascript">
    $(function() {
        var nodeList;
        var json;

        <!-- 解析 JSON -->
        $('#btn-json-resolver').click(function() {
            <!-- 判断JSON输入并格式化 -->
            var originalEle = ace.edit("original");
            var json = originalEle.session.getValue();
            try {
                if (json.length == 0) {
                    alert("Original JSON should not be empty!");
                    return;
                }

                eval('(' + json + ')');
            } catch (error) {
                return alert("Input data is not valid JSON, please check. Error: " + error);
            }

            originalEle.session.setValue(JSON.stringify(eval('(' + json + ')'), null, 4));

            <!-- 清空解析结果 -->
            $('#json-analysis-result').empty();

            var params = {};
            params.json = json;

            $.ajax({
                type: "POST",
                url: "/analysisSchema",
                data: JSON.stringify(params),
                contentType : 'application/json',
                success: function(data) {
                    if(data.length == 0) {
                        alert("The result is empty, please check input!");
                    }

                    nodeList = data;

                    <!-- 将后端返回的List展示在解析结果中 -->
                    for(i = 0; i < nodeList.length; i++) {
                        $('#json-analysis-result').append(function(){
                        var nodeInnerHtml = "<div class=\"i-checks\" style=\"padding-left: " + (nodeList[i].level * 24) + "px;\" data-level=\"" + (nodeList[i].level) +"\" >" +
                                            "<label class=\"\"> <input type=\"checkbox\" value=\"\"> <i></i> " + nodeList[i].nodePath +
                                            "&nbsp;<span class=\"label label-warning\" font-size=\"13px\"> " + nodeList[i].dataType + "</span></label></div>";
                            return nodeInnerHtml;
                        });
                    }

                    $('.i-checks').iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green',
                    });

                    $('.i-checks').on('ifClicked', (e) => {
                        var currentTarget = e.currentTarget;
                        var $ele = $(currentTarget);

                        var target = e.target;
                        var $targetEle = $(target);

                        if($targetEle.context.checked === false) {
                            <!-- 节点被选中的时候 -->

                            <!-- 选中所有子节点 -->
                            var level = +($ele.data('level'));
                            var $child = $ele.next();
                            while( +($child.data('level')) > level) {
                                $child.iCheck('check');
                                $child = $child.next();
                            }

                            <!-- 选中所有父级节点 -->
                            level = +($ele.data('level'));
                            var $parent = $ele;
                            while(level > 0) {
                                level--;
                                while(true){
                                    $parent = $parent.prev();
                                    if (+($parent.data('level')) === level) {
                                        break;
                                    }
                                 }
                                <!--console.log($parent);-->
                                $parent.iCheck('check');
                            }
                        } else {
                            <!-- 节点被取消选中的时候 -->

                            <!-- 取消选中所有子节点 -->
                            var level = +($ele.data('level'));
                            var $child = $ele.next();
                            while( +($child.data('level')) > level) {
                                $child.iCheck('uncheck');
                                $child = $child.next();
                            }
                        }

                    });

                },
                error: function(data) {
                    alert(data.result);
                }
            });
        });

        <!--生成 Schema-->
        $('#btn-json-generate-schema').click(function() {
            <!-- 获取解析结果选择状态 -->
            var result = $('#json-analysis-result input');

            if(result.length == 0) {
                alert("生成Schema之前，请先点击\"解析\"!");
                return;
            }

            var originalEle = ace.edit("original");
            var json = originalEle.session.getValue();

            var params = {};
            params.nodeList = new Array(result.length);
            for(var index = 0; index < result.length; index++) {
                params.nodeList[index] = result[index].checked;
            }

            params.json = json;
            $.ajax({
                type: "POST",
                url: "/generateSchema",
                data: JSON.stringify(params),
                contentType : 'application/json',
                success: function(data) {
                    var schemaData = eval('(' + data + ')');

                    schema.setValue(JSON.stringify(schemaData, null, '\t'));
                },
                error: function(data) {
                    alert("Failed to generate JSON schema, error: " + data);
                }
            });
        });

    });
</script>

</body>

</html>

<!-- Localized -->